<script setup lang="ts">
import { ref } from 'vue'

import { WakeTurbulenceCategory, type EngineType, type AircraftType } from './types'

const id = ref<string | null>(null)
const engineType = ref<EngineType | ''>('')
const wtc = ref<WakeTurbulenceCategory | ''>('')

function filter(lst: AircraftType[]): AircraftType[] {
  const idStr = id.value?.trim()?.toLocaleLowerCase()
  const et = engineType.value
  const wtc_ = wtc.value
  const checkId = !(!idStr || idStr.length === 0)
  const checkEt = et !== ''
  const checkWtc = wtc_ !== ''
  if (!checkId && !checkEt && !checkWtc) {
    return lst
  }
  return lst.filter((e) => {
    if (checkId && e.id.toLowerCase().indexOf(idStr) < 0) {
      return false
    }
    if (checkEt && e.engineType !== et) {
      return false
    }
    if (checkWtc && e.wakeTurbulenceCategory !== wtc_) {
      return false
    }
    return true
  })
}
defineExpose({ filter })
</script>
<template>
  <div class="row">
    <div class="txt-box col-2em">id</div>
    <input class="input col-6em" v-model="id" placeholder="模糊匹配" />
    <div class="txt-box col-3em" style="margin-left: 1em">引擎</div>
    <div class="select col-8em">
      <select v-model="engineType">
        <option value="">所有</option>
        <option value="Jet">Jet</option>
        <option value="TurboProp">TurboProp</option>
        <option value="Piston">Piston</option>
      </select>
    </div>
    <div class="txt-box col-3em" style="margin-left: 1em">类型</div>
    <div class="select col-8em">
      <select v-model="wtc">
        <option value="">所有</option>
        <option value="Light">Light</option>
        <option value="Medium">Medium</option>
        <option value="Heavy">Heavy</option>
        <option value="Jumbo">Jumbo</option>
      </select>
    </div>
  </div>
</template>
